<template>
  <div class="lab-root">

    <page-body @load="load"></page-body>

    <lab-list @submit="setCurrent" :lab-id="labId" :page-num="seedPageNum"
              :page-size="seedPageSize" :query-type="seedQueryType" :show-type="showType"
              :pro-id="proId" :view="view"></lab-list>

    <el-collapse-transition>
      <seed-list :lab-id="labId" v-show="openSeedList" @closeSelfAction="closeSelfAction" :page-num="seedPageNum"
                 :page-size="seedPageSize" :query-type="seedQueryType" @expertDetail="setCurrent" :show-type="showType"
                 :pro-id="proId" @setPage="setPage"></seed-list>
    </el-collapse-transition>

    <pro-list :lab-id="labId" :pro-id="proId" :show-type="showType"></pro-list>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import labList from './labList'
  import seedList from './seedList'
  import proList from './proList'
  import pageBody from './pageBody'

  export default {
    name: 'lab',
    props: {},
    components: {
      labList,
      seedList,
      proList,
      pageBody
    },
    setup(props, content) {

      let {} = props

      let { history: { current: { query: { labId, pageNum: seedPageNum, pageSize: seedPageSize, queryType: seedQueryType, showType, proId } } } } = router

      const data = reactive({
        labId: 1,
        proId: '',
        openSeedList: false,
        seedPageNum: null,
        seedPageSize: null,
        seedQueryType: null,
        showType: 1,
        view: null
      })

      const setCurrent = ({ labId, proId, type }) => {
        data.labId = labId != null ? labId : data.labId
        data.proId = proId != null ? proId : data.proId
        data.showType = type
      }

      const closeSelfAction = () => {
        data.labId = null
        data.openSeedList = false
      }

      const setPage = ({ type: queryType, pageNum, pageSize, labId }) => {
        data.seedQueryType = queryType
        data.seedPageNum = pageNum
        data.seedPageSize = pageSize
        data.labId = labId
      }

      const load = view => {
        data.view = view
      }

      watch(() => data.labId, val => {
        if (val == null || val === '') return
        data.openSeedList = true
      })

      if ((labId != null || proId != null) && seedPageNum != null && seedPageSize != null && seedQueryType != null && showType != null) {
        data.labId = labId
        data.seedPageSize = isNaN(parseInt(seedPageSize)) ? 4 : parseInt(seedPageSize)
        data.seedPageNum = isNaN(parseInt(seedPageNum)) ? 1 : parseInt(seedPageNum)
        data.seedQueryType = isNaN(parseInt(seedQueryType)) ? 1 : parseInt(seedQueryType)
        data.showType = isNaN(parseInt(showType)) ? 1 : parseInt(showType)
        data.proId = proId
      }

      return { ...toRefs(data), setCurrent, closeSelfAction, setPage, load }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .lab-root {
    width: 100%;
    height: 100%;

    .seed-root {
      position: absolute;
      bottom: 15px;
      left: 22.5%;
      width: 55%;
      height: max-content;
    }
  }
</style>
